<template>
    <div class="repertory page">
        <formHeader :title="'申请'+title"></formHeader>
        <div class="con" v-if="tabs.length">
            <cube-scroll
                    class="sideNav"
                    ref="scrollSide"
                    :data="tabs"
                    :option="options"
            >
                <ul class="sideBar">
                    <li
                            class="sideItem"
                            v-for="(tab,index) in tabs"
                            :key="index"
                            @click="changeHandler(index)"
                            :class="{isActive:activedIndex==index}"
                            ref="leftItem"
                    >{{tab.label}}</li>
                </ul>
            </cube-scroll>
            <cube-scroll
                    class="scrollContent"
                    ref="scroll"
                    :data="allData"
                    :option="options"
                    @scroll="scrollRight"
                    :scrollEvents="['scroll']"
            >
                <ul v-for="(items,index) in allData" :key="index" ref="goodsItem">
                    <li class="title">{{items.tabName}}</li>
                    <li  class="goodsItem" v-for="(item,index) in items.data" :key="item.goods.id">
                        <div class="goodsImg"><img :src="imgH+item.goods.img"></div>
                        <div class="right">
                            <div class="name">{{item.goods.name}}</div>
                            <div class="down">
                                <div class="num">余存数量{{item.store.quantity}}</div>
                                <div class="input">
                                    <img  @click="decrease(item.goods.id)" src="./decreace.png" alt="">
                                    <input @input="changeInput($event,item.store.quantity)" min="0" type="number" :max="item.store.quantity" v-model="item.count"/>
                                    <img @click="increase(item.goods.id)" src="./increace.png" alt="">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="seat"></div>
            </cube-scroll>

        </div>
        <div class="shade" v-show="isShowCar" @click="closeCar"></div>
        <div class="car" v-if="tabs.length">
            <div><img src="./car.png"></div>
            <div class="word">
                <div>总数量: {{quantity?quantity:0}}</div>
                <div class="detail" @click="changeShowCar">点击查看详情>></div>
            </div>
            <div class="btn" @click="deliver">立即{{title}}</div>
        </div>
        <div class="shop" v-show="isShowCar">
            <div class="title">
                <div>发货详情</div>
                <div class="right" @click="clearCar">
                    <span><img src="./clear.png" alt=""></span>
                    <span>清空</span>
                </div>
            </div>
            <div class="content">
                <div class="contentTitle">已选商品</div>
                <cube-scroll
                        class="scrollShop"
                        ref="scrollShop"
                        :data="allData"
                        :option="options"
                >
                    <div class="uls">
                        <ul v-for="(items,index) in allStores" :key="index">
                            <li v-if="item.count!=0" class="goodsItem"  v-for="(item,index) in items.data" :key="item.goods.id">
                                <div class="goodsImg"><img :src="imgH+item.goods.img"></div>
                                <div class="right">
                                    <div class="name">{{item.goods.name}}</div>
                                    <div class="down">
                                        <div class="num">余存数量{{item.store.quantity}}</div>
                                    </div>
                                </div>
                                <div class="input">
                                    <img  @click="decrease(item.goods.id)" src="./decreace.png" alt="">
                                    <input @input="changeInput($event,item.store.quantity)" class="shopInput" min="0" :max="item.store.quantity" type="number" v-model="item.count"/>
                                    <img @click="increase(item.goods.id)" src="./increace.png" alt="">
                                </div>
                            </li>
                        </ul>
                    </div>
                </cube-scroll>
            </div>
        </div>
        <div class="bg"  v-if="!tabs||tabs.length<1">
            <img class="img" src="@/assets/cart.png" alt="">
        </div>
    </div>
</template>

<script>
    import {showError,showLoading,hide} from '@/toast'
    import formHeader from '@/components/form-header'
    import {getStoreList} from '@/api/store'
    export default {
        name : "index",
        components:{formHeader},
        data(){
            return{
                selectedLabel:'',
                activedIndex:0,
                tabs:[],
                options:{

                },
                value:[],
                allData:[],
                imgH:process.env.VUE_APP_IMG_DOMAIN,
                isShowCar:false,
                type:'',
                title:'',
                itemHeight:[],
                allStores:[],
                scrollY:0,
                count:0

            }
        },
        methods:{
            changeHandler(index){
                let height = 0
                this.activedIndex=index
                for (let i = 0; i < index; i++) {
                    height += this.$refs.goodsItem[i].offsetHeight
                }
                this.$refs.scroll.scrollTo(0, -height)
            },
            scrollRight(e){
                this.scrollY=e.y

            },
            getItemHeight(){
                let h = 0
                let list = []
                list = this.$refs.goodsItem
                if (!list){
                    return
                }
                list.forEach((item, i) => {
                    h += list[i].clientHeight
                    this.itemHeight.push(h)
                })
                this.itemHeight.unshift(0)
                this.count=1
            },
            increase(id){
                this.allData.forEach(arr=>{
                    arr.data.forEach(obj=>{
                        if(obj.goods.id==id){
                            obj.count=Number(obj.count)+1
                            if(obj.count>=obj.store.quantity){
                                obj.count=obj.store.quantity
                            }
                        }
                    })
                })
                this.init()
            },
            decrease(id){
                this.allData.forEach(arr=>{
                    arr.data.forEach(obj=>{
                        if(obj.goods.id==id){
                            obj.count=(Number(obj.count)-1)>0?(Number(obj.count)-1):0
                        }
                    })
                })
                this.init()
            },
            init(){
                this.allData.forEach(items=>{
                    if (this.allStores.length){
                        items.data.forEach(item=>{
                            let flag = false
                            this.allStores.forEach(stores=>{
                                if (stores.data){
                                    stores.data.forEach(store=>{
                                        if (item.goods.id == store.goods.id) {
                                            flag = true
                                        }
                                    })
                                }
                            })
                            if (!flag) {
                                this.allStores.push(items)
                            }
                        })
                    }else {
                        this.allStores.push(items)
                    }
                })
            },
            clearCar(){
                this.allData.forEach(arr=>{
                    arr.data.forEach(obj=>{
                        obj.count=0
                    })
                })
                this.isShowCar=false
            },
            changeShowCar(){
                this.isShowCar=!this.isShowCar
                // setTimeout(()=>{
                //     console.log('setTime')
                //
                // },1000)
                this.allStores =[]
                this.allData.forEach(items=>{
                    if (this.allStores.length){
                        items.data.forEach(item=>{
                            let flag = false
                            this.allStores.forEach(stores=>{
                                if (stores.data){
                                    stores.data.forEach(store=>{
                                        if (item.goods.id == store.goods.id) {
                                            flag = true
                                        }
                                    })
                                }
                            })
                            if (!flag) {
                                this.allStores.push(items)
                            }
                        })
                    }else {
                        this.allStores.push(items)
                    }
                })
                this.$nextTick(()=>{
                    this.$refs.scrollShop.refresh()
                })
            },
            closeCar(){
                this.isShowCar=false
            },
            deliver(){
                sessionStorage.removeItem('deliver')
                sessionStorage.removeItem('toUserId')
                if(this.quantity==0){
                    showError('货物数量不能为0')
                    return
                }
                let deliverGoods =[]
                this.allStores.forEach(arr=>{
                    arr.data.forEach(item=>{
                        if(item.count!=0){
                            deliverGoods.push(item)
                        }
                    })
                })
                let flag = true
                deliverGoods.forEach(obj=>{
                    if(obj.count>obj.store.quantity){
                        showError('库存数量不足')
                        flag = false
                        return
                    }
                })
                if(flag==true){
                    sessionStorage.setItem('deliver', JSON.stringify(deliverGoods))
                    this.$router.push({
                        path:`/repertory/detail`,
                        query:{
                            type:this.type,
                            name:this.$route.query.name,
                            code:this.$route.query.code,
                            mobile:this.$route.query.mobile,
                            uid:this.$route.query.uid,
                        }
                    })
                }

            },
            changeInput(e,value){
                this.init()
            }
        },
        created(){
            getStoreList().then(res=>{
                // console.log(res.data)
                this.tabs = res.data.map(item=>{
                    return item.mallTypeEntity.name
                }).map(label=>({label}))
                this.allData = res.data.map(item=>{
                    item.mallStoreVos.forEach(res=>{
                        res.count = 0
                    })
                    let obj = {data:item.mallStoreVos,tabName:item.mallTypeEntity.name}
                    return obj
                })
                // console.log(this.allData)
            })
        },
        updated() {
            if(this.count==0){
                // console.log(11111111)
                this.getItemHeight()
            }
        },
        activated(){
            this.isShowCar = false
            // sessionStorage.removeItem('deliver')
            showLoading('正在加载')
            this.type = this.$route.query.type
            if(this.type==0){
                this.title='发货'
            }else {
                this.title='转货'
            }
            getStoreList().then(res=>{
                this.tabs = res.data.map(item=>{
                    return item.mallTypeEntity.name
                }).map(label=>({label}))
                this.allData = res.data.map(item=>{
                    item.mallStoreVos.forEach(res=>{
                        res.count = 0
                    })
                    let obj = {data:item.mallStoreVos,tabName:item.mallTypeEntity.name}
                    return obj
                })
                hide()
            })
            if(this.allData){
                this.allData.forEach(arr=>{
                    arr.data.forEach(obj=>{
                        obj.count=0
                    })
                })
            }
            // this.$nextTick(()=>{
            //     this.$refs.scrollShop.refresh()
            //     this.$refs.scroll.refresh()
            //     this.$refs.scrollSide.refresh()
            // })

        },
        computed:{
            // scrollData(){
            //     return this.allData[this.activedIndex]
            // }
            quantity(){
                let sum = 0
                let hash=[]
                this.allData.forEach(items=>{
                    if (hash.length){
                        items.data.forEach(item=>{
                            let flag = false
                            hash.forEach(stores=>{
                                if (stores.data){
                                    stores.data.forEach(store=>{
                                        if (item.goods.id == store.goods.id) {
                                            flag = true
                                        }
                                    })
                                }
                            })
                            if (!flag) {
                                hash.push(items)
                            }
                        })
                    }else {
                        hash.push(items)
                    }
                })
                hash.forEach(arr=>{
                    arr.data.forEach(obj=>{
                        sum += Number(obj.count)
                    })
                })
                return sum?sum:0
            }

        },
        watch:{
            // scrollData(){
            //     this.value=Array(this.scrollData.length).fill(0)
            // },
            // value(){
            //     this.value.forEach((num,index)=>{
            //         if(num<0){
            //             this.value[index]=0
            //         }
            //     })
            //     console.log(this.value)
            // }
                //右侧滚动，改变左侧
            scrollY(newY){
                if (newY >= 0) this.activedIndex = 0
                let itemHeight = this.itemHeight
                for (let i = 0; i < itemHeight.length - 1; i++) {
                    let h1 = itemHeight[i]
                    let h2 = itemHeight[i + 1]
                    if (-newY >= h1 && -newY < h2) {
                        this.activedIndex = i
                        return
                    }
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
input{
    font-size 10px!important
}
.repertory
    background-color $page-bg
    .bg
        position absolute
        display flex
        flex-direction column
        align-items center
        justify-content center
        top 50%
        transform translateY(-50%)
        .img
            width 80%
    .con
        margin-top 47px
        background-color #fff
        display flex
        height 100%
        padding-bottom 120px
        .sideNav
            width 99px
        .sideBar
            width 99px
            /*height 100%*/
            padding-bottom 80px
            background-color #F1F1F1
            .sideItem
                font-size 13px
                color #333333
                height 47px
                background-color  #F1F1F1
                display flex
                justify-content center
                align-items center
            .isActive
                background-color #fff
    .scrollContent
        /*padding-top 5px*/
        padding-right 10px
        flex 1
        padding-bottom 100px
        .title
            font-size 15px
            font-weight bold
            padding-top 10px
            padding-left 5px
        .seat
            height 550px
            width 100%

    .goodsItem
        display flex
        padding-left 10px
        padding-top 10px
        .goodsImg
            width: 50px
            height: 50px
            img
                width: 50px
                height: 50px
        .right
            margin-left 15px
            flex 1
            .name
                color #333
                font-size 14px
                margin-top 8px
        .down
            color #999
            font-size 10px
            display flex
            align-items center
            margin-top 3px
        .input
            display flex
            justify-content center
            align-items center
            input
                width 30px
                height 17px
                padding 0
                text-align center
        /deep/.cube-input-field
            text-align center
            padding 0!important
        .cube-input_active::after
            border-color #00A398
        /deep/.cube-input::after
            border-color #00A398
        .num
            flex 1
        img
            width: 24px
            height: 24px
        .cube-input
            width 30px
            height 17px
            padding 0

    .car
        position fixed
        bottom 0
        z-index 999
        background-color: #fff
        width 345px
        height 49px
        display flex
        justify-content space-between
        align-items center
        padding-left 30px
        box-shadow 0 0 20px 0 rgba(0, 163, 152, 0.15)
        img
            width 32px
            height: 32px
        .word
            margin-left 10px
            flex 1
            color #333
            font-size 13px
            .detail
                font-size 10px
                color #666
                margin-top 5px
        .btn
            width 115px
            height 49px
            background-color: #00A398
            display flex
            justify-content center
            align-items center
            color #fff
            font-size 15px
    .shade
        height 100%
        width: 100%
        position fixed
        top 0
        z-index 300
    .shop
        height 242px
        width  375px
        background-color #fff
        position fixed
        bottom 49px
        z-index 500
        .title
            padding 0 15px
            background-color: #FFF0D9
            height 30px
            display flex
            justify-content space-between
            align-items center
            color #999
            font-size 13px
            img
                width: 14px
                height: 14px
            .right
                font-size 11px
                display flex
                justify-content center
                align-items center
        .content
            padding 15px
            height 100%
            overflow hidden
            .uls
                padding-bottom 60px
            .scrollShop
                overflow hidden
            .contentTitle
                color #333
                font-size 14px
                font-weight:bold
            .goodsItem
                padding-left 0
                justify-content space-between
                align-items center
            .goodsImg
                img
                    width: 38px
                    height: 38px
                .name
                    margin-top 3px
                .input
                    font-size 10px
                    .shopInput
                        font-size 10px!important
                        width 30px
                        height 17px
                        padding 0
                        text-align center
</style>
